<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>2.v-model的3个修饰符</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
			v-model的三个修饰符：
						lazy：失去焦点再收集数据
						number：输入字符串转为有效的数字（尝试转换，如果输入的不标准，例如:abc123，是不能转换的）
						trim：输入首尾空格过滤
		 -->
		<!-- 准备好一个容器-->
		<div id="demo">
			名字：<input type="text" v-model.lazy="name"> <br>
			年龄：<input type="number" v-model.number="age"> <br>
			年级：<input type="text" v-model.trim="grade">
		</div>

		<script type="text/javascript">
			//阻止 vue 在启动时生成生产提示。
			Vue.config.productionTip = false

			new Vue({
				el:'#demo',
				data:{
					name:'张三',
					age:18,
					grade:'初一'
				}
			})
			
		</script>
	</body>
</html>